<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
	<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
	<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
	<style>
		body {
			font-size: 12px;
			font-family: Arial;
		}
		div.imgAndInfo {
			margin: 40px 20px;
		}
		div.imgAndInfo div.imgInimgAndInfo {
			float: left;
		}
		div.infoInimgAndInfo {
			padding: 0 20px;
			overflow: hidden;
		}
		div.infoInimgAndInfo div.productTitle {
			color: black;
			font-size: 16px;
			font-weight: bold;
			margin: 0 10px;
		}
		div.infoInimgAndInfo div.productSubTitle {
			color: #DD2727;
			font-size: 12px;
			margin: 0 10px;
		}
		div.infoInimgAndInfo div.juhuasuan {
			background-color: #2DA77A;
			color: white;
			line-height: 40px;
			margin-top: 10px;
			text-align: center;
		}
		div.infoInimgAndInfo span.juhuasuanBig {
			font-size: 18px;
			font-weight: bold;
			font-family: 黑体;
		}
		div.infoInimgAndInfo span.juhuasuanTime {
			color: #FFC057;
			font-weight: bold;
		}
		div.infoInimgAndInfo div.productPriceDiv {
			background-image: url("https://how2j.cn/tmall/img/site/priceBackground.png");
			height: 102px;
			padding: 10px;
			color: #666666;
		}
		div.infoInimgAndInfo div.gouwujuanDiv {
			margin-top: 5px;
		}
		div.infoInimgAndInfo span.originalPriceDesc {
			color: #999999;
			display: inline-block;
			width: 68px;
		}
		div.infoInimgAndInfo span.originalPrice {
			font-size: 12px;
			color: #333333;
			text-decoration: line-through;
		}
		div.infoInimgAndInfo span.promotionPriceYuan {
			font-size: 18px;
			color: #C40000;
		}
		div.infoInimgAndInfo span.promotionPrice {
			color: #C40000;
			font-size: 30px;
			font-weight: bold;
		}
		div.infoInimgAndInfo span.promotionPriceDesc {
			color: #999999;
			display: inline-block;
			position: relative;
			width: 68px;
			left: 0;
			top: -10px;
		}
		div.infoInimgAndInfo div.productSaleAndReviewNumber {
			margin: 20px 0;
			border-top: 1px dotted #C9C9C9;
			border-bottom: 1px dotted #C9C9C9;
			padding: 10px;
		}
		div.infoInimgAndInfo div.productSaleAndReviewNumber div {
			display: inline-block;
			color: #999999;
			width: 49%;
			font-size: 12px;
			text-align: center;
		}
		div.infoInimgAndInfo div.productSaleAndReviewNumber div:first-child {
			border-right: 1px solid #E5DFDA;
		}
		div.infoInimgAndInfo div.productNumber {
			color: #999999;
		}
		div.infoInimgAndInfo span.productNumberSettingSpan {
			border: 1px solid #999999;
			display: inline-block;
			width: 43px;
			height: 32px;
			padding-top: 7px;
		}
		div.infoInimgAndInfo input.productNumberSetting {
			border: 0px;
			height: 80%;
			width: 80%;
		}
		div.productNumber span.updown img {
			//display: inline-block;
			vertical-align: top;
		}
		div.productNumber span.updown {
			border: 1px solid #999999;
			display: block;
			width: 20px;
			height: 14px;
			text-align: center;
			padding-top: 4px;
		}
		div.productNumber span.updownMiddle {
			height: 4px;
			display: block;
		}
		div.productNumber span.arrow {
			display: inline-block;
			width: 22px;
			height: 32px;
			vertical-align: top;
		}
		div.serviceCommitment {
			margin: 20px 0;
		}
		div.infoInimgAndInfo span.serviceCommitmentDesc {
			color: #999999;
		}
		div.infoInimgAndInfo span.serviceCommitmentLink a {
			color: #666666;
		}
		div.buyDiv {
			margin: 20px auto;
			text-align: center;
		}
		div.buyDiv button {
			display: inline-block;
			margin: 0 10px;
			width: 180px;
			height: 40px;
		}
		button.buyButton {
			border: 1px solid #C40000;
			background-color: #FFEDED;
			text-align: center;
			line-height: 40px;
			font-size: 16px;
			color: #C40000;
		}
		button.addCartButton {
			border: 1px solid #C40000;
			background-color: #C40000;
			text-align: center;
			line-height: 40px;
			font-size: 16px;
			color: white;
		}
		button.addCartButton span.glyphicon {
			font-size: 12px;
			margin-right: 8px;
		}
		a:hover {
			text-decoration: none;
		}
		.redColor {
			color: #C40000;
		}
		.boldWord {
			font-weight: bold;
		}
	</style>
	<script>
		$(function () {
		    var stock = 66;
		    $(".productNumberSetting").keyup(function () {
		        var num = $(".productNumberSetting").val();
		        num = parseInt(num);
		        if (isNaN(num)) {
		            num = 1;
		        }
		        if (num <= 0) {
		            num = 1;
		        }
		        if (num > stock) {
			        num = stock;
		        }
		        $(".productNumberSetting").val(num);
            });
		    $(".increaseNumber").click(function () {
		        var num = $(".productNumberSetting").val();
		        num++;
		        if (num > stock) {
		            num = 66;
		        }
		        $(".productNumberSetting").val(num);
            });
		    $(".decreaseNumber").click(function () {
		        var num = $(".productNumberSetting").val();
		        num--;
		        if (num <= 0) {
		            num = 1;
		        }
		        $(".productNumberSetting").val(num);
            });
        });
	</script>
</head>
<body>
	<div class="imgAndInfo">
		<div class="imgInimgAndInfo">
			<img width="100px" src="https://how2j.cn/tmall/img/productSingle/8619.jpg">
		</div>
		<div class="infoInimgAndInfo">
			<div class="productTitle">
				名媛2016新款女装夏两件套裤韩版雪纺七分裤阔腿裤休闲时尚套装女
			</div>
			<div class="productSubTitle">
				高端定制 高档棉麻 现货即发 加购物车 领优惠卷
			</div>
			<div class="productPrice">
				<div class="juhuasuan">
					<span class="juhuasuanBig">聚划算</span>
					<span>此商品即将参加聚划算，<span class="juhuasuanTime">1天19小时</span>后开始，</span>
				</div>
				<div class="productPriceDiv">
					<div class="gouwujuanDiv"><img height="16px" src="https://how2j.cn/tmall/img/site/gouwujuan.png">
						<span> 全天猫实物商品通用</span>
					</div>
					<div class="originalDiv">
						<span class="originalPriceDesc">价格</span>
						<span class="originalPriceYuan">¥</span>
						<span class="originalPrice">
						399.00
					</span>
					</div>
					<div class="promotionDiv">
						<span class="promotionPriceDesc">促销价 </span>
						<span class="promotionPriceYuan">¥</span>
						<span class="promotionPrice">
						379.05
					</span>
					</div>
				</div>
			</div>
			<div class="productSaleAndReviewNumber">
				<div>销量 <span class="redColor boldWord"> 50</span></div>
				<div>累计评价 <span class="redColor boldWord"> 19</span></div>
			</div>
			<div class="productNumber">
				<span>数量</span>
				<span>
				<span class="productNumberSettingSpan">
				<input type="text" value="1" class="productNumberSetting">
				</span>
				<span class="arrow">
					<a class="increaseNumber" href="#nowhere">
					<span class="updown">
					   <img src="https://how2j.cn/tmall/img/site/increase.png">
					</span>
					</a>
					<span class="updownMiddle"> </span>
					<a class="decreaseNumber" href="#nowhere">
					<span class="updown">
					    <img src="https://how2j.cn/tmall/img/site/decrease.png">
					</span>
					</a>
				</span>
			件</span>
				<span>库存66件</span>
			</div>
			<div class="serviceCommitment">
				<span class="serviceCommitmentDesc">服务承诺</span>
				<span class="serviceCommitmentLink">
				<a href="#nowhere">正品保证</a>
				<a href="#nowhere">极速退款</a>
				<a href="#nowhere">赠运费险</a>
				<a href="#nowhere">七天无理由退换</a>
			</span>
			</div>
			<div class="buyDiv">
				<a href="#nowhere" class="buyLink"><button class="buyButton">立即购买</button></a>
				<a class="addCartLink" href="#nowhere"><button class="addCartButton"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button></a>
			</div>
		</div>
		<div style="clear:both"></div>
	</div>
</body>
</html>